<template>
	<view>
		<view class="nav">
			<view class="nav-left">
				<text class="iconfont icon-zuo"></text>
			</view>
			<view class="nav-center">
				记一笔
			</view>
		</view>
		<!-- 头部 -->
		<view class="top">
			<view class="top-box bor">
				支出
			</view>
			<view class="top-box">
				收入
			</view>
			<view class="top-box">
				转账
			</view>
		</view>
		<!-- 支出 -->
		<view class="spend">
			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>

			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>


			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>


			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>


			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>
			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>
			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>
		</view>

		<!-- 收入 -->
		<!-- 		<view class="spend">
			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>
			
			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>
			
			
			<view class="spend-box">
				<view class="box-top">
					<text class="iconfont icon-sandian"></text>
				</view>
				<view class="btm">
					购物
				</view>
			</view>
		</view> -->
		<!-- 转账 -->
		<!-- <view class="access">
			<view class="access-box">
				<view class="left">
					转出账户
				</view>
				<view class="rig">
					现金账户
				</view>
			</view>
			<view class="access-box">
				<view class="left">
					转出账户
				</view>
				<view class="rig">
					现金账户
				</view>
			</view>
			<view class="access-box">
				<view class="left">
					转出账户
				</view>
				<view class="rig">
					现金账户
				</view>
			</view>
		</view> -->
		<!-- 底部 -->
		<view class="botm">
			<!-- 选项 -->
			<view class="option">
				<view class="option-box">
					<text class="iconfont icon-zhanghuxinxi"></text>
					<text>账户</text>
				</view>
				<view class="option-box">
					<text class="iconfont icon-tupian"></text>
					<text>照片</text>
				</view>
			</view>
			<!-- 输入框 -->
			<view class="btm-cen">
				<view class="cen-top">
					<view class="left">
						现金--银行
					</view>
					<view class="rig">
						<text class="iconfont icon-changyongtubiao1-53"></text>
						<text>9月9日</text>
					</view>
				</view>
				<view class="cen-btm">
					<view class="left">
						￥0.00
					</view>
					<view class="rig">
						<input type="text" placeholder="请输入备注(50字))" />
					</view>
				</view>
			</view>

			<!-- 键盘 -->
				<view class="jian">
					<view class="shu">
						7
					</view>
					<view class="shu">
						8
					</view>
					<view class="shu">
						9
					</view>
					<view class="shu blue">
						再记一笔
					</view>
					<view class="shu">
						4
					</view>
					<view class="shu">
						5
					</view>
					<view class="shu">
						6
					</view>
					<view class="shu">
						-
					</view>
					<view class="shu">
						1
					</view>
					<view class="shu">
						2
					</view>
					<view class="shu">
						3
					</view>
					<view class="shu">
						+
					</view>
					<view class="shu">
						0
					</view>
					<view class="shu">
						.
					</view>
					<view class="shu">
						x
					</view>
					<view class="shu green">
						完成
					</view>
				</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	@import url("bookkepp.less");
</style>